<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
	<body>
		
		
		<h:form id="form">
    <p:growl id="messages" showDetail="true"/>

    <p:panel header="Players">
        <h:panelGrid columns="2" cellpadding="5">
            <h:outputLabel value="Basic Pojo: " for="basicPojo"/>
            <p:autoComplete value="#{autoCompleteBean.selectedPlayer1}" id="basicPojo" completeMethod="#{autoCompleteBean.completePlayer}"
                        var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player" forceSelection="true"/>

            <h:outputLabel value="Custom Content: " for="customPojo" />
            <p:autoComplete value="#{autoCompleteBean.selectedPlayer2}" id="customPojo" completeMethod="#{autoCompleteBean.completePlayer}"
                        var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player" forceSelection="true">
                <p:column>
                    <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>
                </p:column>

                <p:column>
                    #{p.name} - #{p.number}
                </p:column>
            </p:autoComplete>
        </h:panelGrid>
    </p:panel>

    <br/>

    <p:commandButton value="Submit" update="display" oncomplete="dlg.show()"/>

    <p:dialog header="Selected Players" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true">
        <h:panelGrid columns="1" id="display">
            <h:outputText id="txt1" value="Player 1: #{autoCompleteBean.selectedPlayer1.name}" rendered="#{not empty autoCompleteBean.selectedPlayer1}"/>

            <h:outputText id="txt2" value="Player 2: #{autoCompleteBean.selectedPlayer2.name}" rendered="#{not empty autoCompleteBean.selectedPlayer2}"/>
        </h:panelGrid>
    </p:dialog>
</h:form>
		
		
		
	</body>
</html>